<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <!-- 公共头部 -->
    {{include './comm/link.html'}}
    <title>Hello, world!</title>
  </head>

  <body>
    <div class="lark">
      <!-- header -->
      {{include './comm/header.html'}}
      <!-- header end -->

      <!-- main wrapper -->
      <div class="main-wrapper">
        <!-- selection  -->
        <div class="selection-main">
          <div class="clearfix container lark-container ">
            <div class="row h100">
              <div class="col col-8 px-2">
                <!-- console.log("col-8"); -->
                <div class="selection-banner h100">
                  <div
                    id="carouselExampleIndicators"
                    class="carousel slide"
                    data-ride="carousel"
                  >
                    <div class="carousel-inner">
                      <ol class="carousel-indicators">
                        <li
                          data-target="#carouselExampleIndicators"
                          data-slide-to="0"
                          class="active"
                        ></li>
                        <li
                          data-target="#carouselExampleIndicators"
                          data-slide-to="1"
                        ></li>
                        <li
                          data-target="#carouselExampleIndicators"
                          data-slide-to="2"
                        ></li>
                      </ol>

                      <div class="carousel-item active">
                        <img
                          class="d-block w-100"
                          data-src="holder.js/800x400?auto=yes&amp;bg=777&amp;fg=555&amp;text=First slide"
                          alt="First slide [800x400]"
                          src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_16e87e45218%20text%20%7B%20fill%3A%23555%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_16e87e45218%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22285.9000015258789%22%20y%3D%22218%22%3EFirst%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
                        />
                      </div>
                      <div class="carousel-item">
                        <img
                          class="d-block w-100"
                          data-src="holder.js/800x400?auto=yes&amp;bg=666&amp;fg=444&amp;text=Second slide"
                          alt="Second slide [800x400]"
                          src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_16e87e4521a%20text%20%7B%20fill%3A%23444%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_16e87e4521a%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23666%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22247.2916717529297%22%20y%3D%22218%22%3ESecond%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
                        />
                      </div>
                      <div class="carousel-item">
                        <img
                          class="d-block w-100"
                          data-src="holder.js/800x400?auto=yes&amp;bg=555&amp;fg=333&amp;text=Third slide"
                          alt="Third slide [800x400]"
                          src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_16e87e4521b%20text%20%7B%20fill%3A%23333%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_16e87e4521b%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23555%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22276.9749984741211%22%20y%3D%22218%22%3EThird%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
                        />
                      </div>
                    </div>

                    <a
                      class="carousel-control-prev"
                      href="#carouselExampleIndicators"
                      role="button"
                      data-slide="prev"
                    >
                      <span
                        class="carousel-control-prev-icon"
                        aria-hidden="true"
                      ></span>
                      <span class="sr-only">Previous</span>
                    </a>
                    <a
                      class="carousel-control-next"
                      href="#carouselExampleIndicators"
                      role="button"
                      data-slide="next"
                    >
                      <span
                        class="carousel-control-next-icon"
                        aria-hidden="true"
                      ></span>
                      <span class="sr-only">Next</span>
                    </a>
                  </div>
                </div>
              </div>
              <div class="col col-4 px-2">
                <!-- console.log("col-4"); -->
                <div class="selection-list h100">
                  <div class="lhead">
                    <h3 class="pageTitle">小编精选</h3>
                    <a href="/explore/selections" class="float-right">往期</a>
                  </div>
                  <ul class="list-group list-group-flush">
                    <li class="list-group-item">Cras justo odio</li>
                    <li class="list-group-item">Dapibus ac facilisis in</li>
                    <li class="list-group-item">Vestibulum at eros</li>
                    <li class="list-group-item">Vestibulum at eros</li>
                    <li class="list-group-item">Vestibulum at eros</li>
                    <li class="list-group-item">Vestibulum at eros</li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- selection end -->

        <!-- recommend -->
        <div class="recommend-main">
          <div class="clearfix container lark-container">
            <div class="row h100">
              <div class="col col-9 px-2">
                <div class="card">
                  <div class="card-body">
                    This is some text within a card body.
                  </div>
                </div>

                <div class="card mt-2">
                  <div class="card-body">
                    <ul class="ant-list-items">
                      <li>
                        <div class="docItem">
                          <div class="likes likes___1O61J">84</div>
                          <a
                            class="content"
                            href="/yuque/blog/za5vpk"
                            target="_blank"
                          >
                            <h4 class="title">
                              语雀年度盛典来袭！杭州·语雀知识大会🌾
                            </h4>
                            <div class="description">
                              12.08，语雀与你不见不散。
                              语雀产品全新升级，拓展知识协同边界。和语雀一起进入全新的知识协同
                              2.0 时代。
                            </div></a
                          >
                          <div class="docMeta">
                            <a href="/fangqiao" target="_blank"
                              ><div
                                data-testid="lark-popover"
                                class="lark-popover"
                              >
                                <span data-testid="content">方峤</span>
                              </div></a
                            >发布于<a href="/yuque/blog" target="_blank"
                              >语雀的天空</a
                            ><span class="datetime">11-20 10:22</span>
                          </div>
                        </div>
                      </li>

                      <li>
                        <div class="docItem">
                          <div class="likes likes___1O61J">84</div>
                          <a
                            class="content"
                            href="/yuque/blog/za5vpk"
                            target="_blank"
                            ><div
                              class="cover"
                              style='background-image: url("static/img/1574150929734-d070a542-fca6-404e-83fc-5c6ead4e05c7.png");'
                            ></div>
                            <h4 class="title">
                              语雀年度盛典来袭！杭州·语雀知识大会🌾
                            </h4>
                            <div class="description">
                              12.08，语雀与你不见不散。
                              语雀产品全新升级，拓展知识协同边界。和语雀一起进入全新的知识协同
                              2.0 时代。
                            </div></a
                          >
                          <div class="docMeta">
                            <a href="/fangqiao" target="_blank"
                              ><div
                                data-testid="lark-popover"
                                class="lark-popover"
                              >
                                <span data-testid="content">方峤</span>
                              </div></a
                            >发布于<a href="/yuque/blog" target="_blank"
                              >语雀的天空</a
                            ><span class="datetime">11-20 10:22</span>
                          </div>
                        </div>
                      </li>

                      <li>
                        <div class="docItem">
                          <div class="likes likes___1O61J">84</div>
                          <a
                            class="content"
                            href="/yuque/blog/za5vpk"
                            target="_blank"
                            ><div
                              class="cover"
                              style='background-image: url("static/img/1574150929734-d070a542-fca6-404e-83fc-5c6ead4e05c7.png");'
                            ></div>
                            <h4 class="title">
                              语雀年度盛典来袭！杭州·语雀知识大会🌾
                            </h4>
                            <div class="description">
                              12.08，语雀与你不见不散。
                              语雀产品全新升级，拓展知识协同边界。和语雀一起进入全新的知识协同
                              2.0 时代。
                            </div></a
                          >
                          <div class="docMeta">
                            <a href="/fangqiao" target="_blank"
                              ><div
                                data-testid="lark-popover"
                                class="lark-popover"
                              >
                                <span data-testid="content">方峤</span>
                              </div></a
                            >发布于<a href="/yuque/blog" target="_blank"
                              >语雀的天空</a
                            ><span class="datetime">11-20 10:22</span>
                          </div>
                        </div>
                      </li>
                    </ul>
                  </div>
                </div>

                <!-- loadmore -->
                <div class="loadMore" data-aspm-click="d65943">加载更多</div>
              </div>
              <div class="col col-3 px-2">
                <!-- console.log("col-3"); -->
                <div class="card">
                  <div class="card-body side">
                    <div class="lhead">
                      <h3 class="pageTitle">热门文章</h3>
                      <a href="/explore/selections" class="float-right">更多</a>
                    </div>
                    <ul class="list-group list-group-flush">
                      <li class="list-group-item">Cras justo odioCras justo odioCras justo odioCras justo odio</li>
                      <li class="list-group-item">Dapibus ac facilisis in</li>
                      <li class="list-group-item">Vestibulum at eros</li>
                      <li class="list-group-item">Vestibulum at eros</li>
                      <li class="list-group-item">Vestibulum at eros</li>
                      <li class="list-group-item">Vestibulum at eros</li>
                    </ul>
                  </div>
                </div>
                <div class="card mt-2">
                  <div class="card-body side">
                    <div class="lhead">
                      <h3 class="pageTitle">热门专题</h3>
                      <a href="/explore/selections" class="float-right">更多</a>
                    </div>
                    <ul class="list-group list-group-flush">
                      <li class="list-group-item">Cras justo odio</li>
                      <li class="list-group-item">Dapibus ac facilisis in</li>
                      <li class="list-group-item">Vestibulum at eros</li>
                      <li class="list-group-item">Vestibulum at eros</li>
                      <li class="list-group-item">Vestibulum at eros</li>
                      <li class="list-group-item">Vestibulum at eros</li>
                    </ul>
                  </div>
                </div>
                <div class="card mt-2">
                  <div class="card-body">
                    This is some text within a card body.
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- recommend end -->
      </div>
      <!-- main wrapper end -->
    </div>

    {{include './comm/copy.html'}} {{include './comm/footer.html'}}
  </body>
</html>
